<template>
  <div>
    <n-bar></n-bar>
    <van-tabs v-model="active">
      <van-tab title="全部"></van-tab>
      <van-tab title="降价"></van-tab>
      <van-tab title="常卖"></van-tab>
      <van-tab title="分类"></van-tab>
    </van-tabs>
    <div v-if="lists.length > 0">
      <div class="cartInfo" v-for="item in lists" :key="item.id">
        <!-- 单选按钮 -->
        <div class="cartbtn">
          <van-checkbox
            v-model="item.checked"
            @change="cartone"
            checked-color="#ee0a24"
          ></van-checkbox>
        </div>
        <van-swipe-cell>
          <!-- 渲染页面  -->
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.goodsname"
            class="goods-card"
            :thumb="item.img"
            default
          >
            <!-- 按钮增加减少 -->
            <template #footer>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
                @plus="plus(item.id)"
                @minus="minus(item.id)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button btnDel"
              @click="del(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <div v-else>
      <van-empty description="购物车空空如也" />
    </div>
    <!-- 提交栏 -->
    <van-submit-bar :price="allPrice" @submit="submit" button-text="提交订单">
      <van-checkbox @click="allcart" v-model="checkall" checked-color="#ee0a24"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script >
import { Cartlist, Cartdelete, Cartedit, Orderadd } from "../request/app";
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 0,
      lists: [], //购物车列表
      checkall: false, //全选
    };
  },
  methods: {
    getList() {
      Cartlist({
        uid: JSON.parse(sessionStorage.getItem("userinfo")).uid,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.lists = res.list ? res.list : [];
          // 通过循环遍历给购物车列表添加参数
          this.lists.map((item) => {
            this.$set(item, "checked", false);
          });
        }
      });
    },
    // 封装一个删除
    del(id) {
      Cartdelete({
        id,
      }).then((res) => {
        // console.log(res, "响应");
        if (res.code == 200) {
          Toast(res.msg);
          //  重新加载
          //  location.reload()这个一般不用他会重新加载浏览器很麻烦
          // 我们删除的时候后端会返回列表，直接重新赋值就好
          //  单页应用
          this.getList();
        }
      });
    },
    // 封装一个增加按钮
    plus(id) {
      Cartedit({
        id,
        type: 2,
      });
    },
    // 封装一个减少按钮
    minus(id) {
      Cartedit({
        id,
        type: 1,
      });
    },
    // 封装一个全选事件
    allcart() {
      //  console.log(this.checkall);
      this.lists.map((item) => {
        item.checked = this.checkall;
      });
    },
    // 封装一个单选按钮
    cartone() {
      this.checkall = this.lists.every((item) => item.checked);
    },

    // 封装一个提交事件
    submit() {
      // 点击提交跳转订单页
      // this.$router.push('/order')
      // 跳转订单页我们需要一些参数(countmoney支付金额)(countnumber购买数量)(idstr必须为字符串)
      // 跳转订单页要传递一些参数传递期间我们要做判断用户至少选择一个商品否则提示
      //  用some判断用户选择一件(some全假为假一真为真) 否则提交不了
      if (this.lists.some((item) => item.checked)) {
        // 先获取用户购买商品的数量
        let num = 0;
        //  获取用户选择的商品id
        let val = "";
        //  获取用户选择的购物车列表
        let arr = [];
        this.lists.map((item) => {
          if (item.checked) {
            //  计算数量和
            (num += item.num),
              //  id的拼接
              (val += `,${item.id}`),
              //  把选择的购物车列表进行推送
              arr.push(item);
          }
        });
        //  定义一个对象去接收这几个必传参数
        let orderInfo = {
          countmoney: this.allPrice,
          countnumber: num,
          idstr: val.slice(1),
        };
        // 把获取的订单对象存到存储中
        sessionStorage.setItem("orderInfo", JSON.stringify(orderInfo));
        // 把选择的购物车列表数组加入到存储中
        sessionStorage.setItem("arr", JSON.stringify(arr));
        this.$router.push("/order");
      } else {
        Toast.fail("至少选择一件商品去结算");
      }

      // Orderadd({
      //     uid:
      // }).then(res=>{
      //   console.log(res,"订单页");
      // })
    },
  },
  mounted() {
    if (sessionStorage.getItem("userinfo")) {
      this.getList();
    }else{
      this.$router.push('/login')
    }
  },
  computed: {
    // 封装一个合计金额
    allPrice() {
      let sum = 0;
      this.lists.map((item) => {
        if (item.checked) {
          sum += item.price * item.num;
        }
      });
      return sum * 100;
    },
  },
};
</script>

<style lang='less' scoped>
.cartInfo {
  width: 100%;
  display: flex;
  align-items: center;
}
.cartbtn {
  width: 10%;
}
.van-submit-bar {
  bottom: 0.5rem;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.btnDel {
  height: 100%;
  right: -0.01rem;
}
</style>
